import React, { useEffect, useMemo, useRef, useState } from 'react'
import FabricDraw, { CANVAS_TYPR, DRAW_TYPE } from './internal/fabric'
import { Button, Col, Radio, Row } from 'antd'
function Fabric() {

  const canvasRef = useRef(null)
  const [fabric, setFabric] = useState<FabricDraw>()
  const setRender = useState({})[1]

  useEffect(() => {
    if (canvasRef.current) {
      console.log('canvasRef.current', canvasRef.current)
      var fabric = FabricDraw.initFabricDraw({ id: 'fabric', setRender, imageUrl: 'https://q9.itc.cn/images01/20240610/ce9e0fd7779c444dac9c27ea50d2f0df.jpeg' })
      console.log('fabric', fabric)
      setFabric(fabric)
    }
    return () => {
      fabric?.canvasInstance().dispose()
    };
  }, []);

  // const btn = useMemo(() => {
  //   return fabric?.isType(CANVAS_TYPR.DEFAULT) ? '绘制' : '拖拽'
  // }, [fabric?.getCanvasType()])

  return (
    <div>
      <Row gutter={[10, 10]} style={{ marginBottom: 8 }}>
        <Col>
          <Button size='small' onClick={() => fabric?.changeCanvasType(fabric?.isType(CANVAS_TYPR.DEFAULT) ? CANVAS_TYPR.DRAW : CANVAS_TYPR.DEFAULT)} type='primary'>{fabric?.isType(CANVAS_TYPR.DEFAULT) ? '绘制' : '拖拽'}</Button>
        </Col>
        <Col>
          <Radio.Group size='small' value={fabric?.tmpType} buttonStyle="solid" onChange={(e) => fabric?.changeType(e.target.value)}>
            <Radio.Button value={DRAW_TYPE.rect} type='primary'>四边形</Radio.Button>
            <Radio.Button value={DRAW_TYPE.polygon} type='primary'>多边形</Radio.Button>
          </Radio.Group>
        </Col>
        <Col>
          <Button size='small' onClick={() => console.log('获取图形（rect，ploy）：', fabric?.getObjects())} type='primary'>获取</Button>
        </Col>
        <Col>
          <Button size='small' onClick={() => fabric?.testObj()} type='primary'>测试初始化图形</Button>
          <Button size='small' onClick={() => fabric?.updateMatrix()} type='primary'>修改后计算</Button>

        </Col>
      </Row>
      <canvas tabIndex={0} ref={canvasRef} id='fabric' width={800} height={600}>Fabric</canvas>
    </div>
  )
}

export default Fabric
